<template>
	<view class="content">
		<view class="info_div">

			<view class="item_div_3">
				<view style="display: flex;">
					<view style="color: red;">*</view>预约时间 |
				</view>
				<!-- <input class="et" placeholder="请输入预约时间" @input="onInputTime" /> -->
				<uni-datetime-picker id="uni_dt_picker" type="datetime" hide-second :border="false" :clear-icon="false" :value="info.install_date" return-type="timestamp" @change="changeLog" />
			</view>

			<!-- <view class="item_div">
				<view style="display: flex;">
					<view style="color: red;">*</view>安装型号 |
				</view>
				<input class="et" placeholder="请输入安装型号" @input="onInputModel" :value="info.ts" />
			</view> -->

			<view class="item_div">
				<view style="display: flex;">
					<view style="color: red;">*</view>安装型号 |
				</view>
				<view class="et" @click.stop="onSelTs">{{info.ts || '请选择安装型号'}} ></view>
			</view>

			<view class="item_div_2">
				<view style="display: flex;">
					<view style="color: red;">*</view>客户地址 |
				</view>
				<textarea class="et_2" placeholder="请输入客户地址" @input="onInputAddr" :value="info.address" />
			</view>

			<view class="item_div">
				<view style="display: flex;">
					<view style="color: red;">*</view>客户电话 |
				</view>
				<input class="et" placeholder="请输入客户电话" @input="onInputPhone" :value="info.mobile" />
			</view>

			<view class="item_div">
				<view style="display: flex;">
					<view style="color: red;">*</view>销售人员 |
				</view>
				<view class="et" @click.stop="onSelSaler">{{info.salesperson || '请选择销售人员'}} ></view>
			</view>

			<view class="item_div">
				<view>安装位置 |</view>
				<view class="et" @click.stop="onChooseLocation">{{map_position}} ></view>
			</view>

			<view class="item_div">
				<view>安装人员 |</view>
				<view class="et" @click.stop="onSelInstaller">{{installer_name}} ></view>
			</view>

			<!-- <view class="item_div">
				<view @click.stop="reqArea('', '', 1)">安装地区 |</view>
				<view class="et_3">
					<picker class="area" @change="onProvinceIndex" :range="province_list" range-key="name" mode="selector">
						<view>{{area_province.name || '省份'}}</view>
					</picker>
					<picker class="area" @change="onCityIndex" :range="city_list" range-key="name" mode="selector">
						<view>{{area_city.name || '城市'}}</view>
					</picker>
					<picker class="area" @change="onAreaIndex" :range="area_list" range-key="name" mode="selector">
						<view>{{area_area.name || '县区'}}</view>
					</picker>
				</view>
			</view> -->

			<!-- 安装地区:方案二 -->
			<view class="item_div" style="display: none;">
				<view>安装地区 |</view>
				<view class="et">{{province_str ? `${province_str}${city_str}` : `选择位置自动解析`}}</view>
			</view>

			<view class="item_div">
				<view>锁体型号 |</view>
				<input class="et" placeholder="请输入锁体型号" @input="onInputModel2" :value="info.lock_ts" />
			</view>

			<view class="item_div">
				<view>锁体照片 |</view>
				<view style="display: flex;align-items: center;">
					<image id="img_lock" :src="info.lock_img"></image>
					<view style="color: deepskyblue;" @click.stop="onUploadImg(0)">点击上传</view>
				</view>
			</view>

			<view class="item_div_2">
				<view>客户要求 |</view>
				<textarea class="et_2" placeholder="请输入客户要求" @input="onInputRemark" :value="info.remark" />
			</view>

			<view class="item_div_2">
				<view>抖音单号 |</view>
				<textarea class="et_2" placeholder="请输入抖音订单编号" @input="onInputDySn" :value="info.dy_sn" />
			</view>

			<!-- <view class="item_div_2">
				<view>赠品 |</view>
				<textarea class="et_2" placeholder="请输入赠品" @input="onInputGift" :value="info.gift" />
			</view> -->

			<view class="item_div_4">
				<view>赠品 |</view>
				<view class="et_4" @click.stop="onSelGift">{{info.gift || '请选择赠品'}} ></view>
			</view>

		</view>

		<view class="op_btn_div">
			<view id="btn_ok" @click.stop="onOk">{{info.id ? '确认编辑' : '确认提交'}}</view>
		</view>

	</view>
</template>

<script>
	import { getUInfo, timeStr2Timestamp, getCityAndProvince } from '@/util/util.js'
	import { checkUpdate } from '@/util/uni_util.js'
	const uploadImage = require('@/util/oss/upload.js')
	export default {
		data() {
			return {
				hint: '请扫描用户点击优惠券展示的二维码',

				installer_name: '请选择安装人员',
				map_position: '请选择地理位置', // 地图选点位置

				location: {}, // 地理位置对象

				area_province: {}, // 安装地区(用于统计区域)
				area_city: {}, // 安装地区(用于统计区域)
				area_area: {}, // 安装地区(用于统计区域)
				province_list: [],
				city_list: [],
				area_list: [],
				index_province: 14,
				index_city: 0,
				index_area: 0,

				province_str: '山东省', // 安装地区:省份字符串
				city_str: '临沂市', // 安装地区:城市字符串

				// 信息对象
				info: {
					install_date: new Date().getTime(), // 预约日期(20250125改为预约时间 原来的预约时间不再使用)
					// install_time: '', // 预约时间
					ts: '', // 型号
					ts_id: '', // 型号id
					address: '', // 地址
					mobile: '', // 电话
					remark: '', // 客户要求
					gift: '', // 赠品
					gift_arr: '[]', // 赠品
					lock_ts: '', // 锁体型号
					lock_img: '', // 锁体照片
					installer: '', // 安装人员(选择的id)
					salesperson_id: '', // 销售人员(选择的id)
					salesperson: '', // 销售人员姓名
					// 默认临沂 118.233695, 35.10305
					lon: '118.233695', // 经度
					lat: '35.10305', // 纬度
					dy_sn: '', // 抖音单号
				},
			}
		},

		onLoad() {

			// onSelInstaller
			uni.$on('onSelInstaller', (data) => {
				console.log('监听到事件onSelInstaller，携带参数为：' + data.msg.name);
				let installer = data.msg
				if (installer) {
					this.info.installer = installer.id // 需要传给接口的安装人员id
					this.installer_name = installer.name ? installer.name : installer.tel
				}
			})

			// onSelSaler
			uni.$on('onSelSaler', (data) => {
				console.log('监听到事件onSelSaler，携带参数为：' + data.msg.name);
				let saler = data.msg
				if (saler) {
					this.info.salesperson_id = saler.id // 需要传给接口的销售人员id
					this.info.salesperson = saler.name ? saler.name : saler.id
				}
			})

			// onSelTs
			uni.$on('onSelTs', (data) => {
				console.log('监听到事件onSelTs，携带参数为：' + data.msg.name);
				let ts = data.msg
				if (ts) {
					this.info.ts_id = ts.id // 需要传给接口的安装型号id
					this.info.ts = ts.name
				}
			})

			// onSelGift
			uni.$on('onSelGift', (data) => {
				console.log('监听到事件onSelGift，携带参数为：' + JSON.stringify(data.msg));
				let arr = data.msg
				if (arr && arr.length > 0) {
					this.info.gift_arr = JSON.stringify(data.msg)
					let g_str = ''
					data.msg.map((item, index) => {
						g_str = `${g_str}，${item.name}${item.num}个`
					})
					this.info.gift = g_str.slice(1)
				} else {
					this.info.gift = ''
					this.info.gift_arr = '[]'
				}
			})

			// onEdit
			uni.$on('onEdit', (data) => {
				console.log('监听到事件onEdit，携带参数为：' + data.install_info);
				let install_info = data.install_info
				if (install_info) {
					// console.log('install_info.jsonstr = ', JSON.stringify(install_info));
					// this.info = { ...install_info, install_date: 1000 * install_info.install_date }

					this.info.id = install_info.id

					this.info.install_date = 1000 * install_info.install_date // 预约日期(20250125改为预约时间 原来的预约时间不再使用)
					// install_time: '', // 预约时间
					this.info.ts = install_info.ts // 型号
					this.info.ts_id = install_info.ts_id // 型号id
					this.info.address = install_info.address // 地址
					this.info.mobile = install_info.mobile // 电话
					this.info.remark = install_info.remark // 客户要求
					this.info.gift = install_info.gift // 赠品
					this.info.gift_arr = JSON.stringify(install_info.gift_info) // 赠品数组数据
					this.info.dy_sn = install_info.dy_sn // 抖音单号
					this.info.lock_ts = install_info.lock_ts // 锁体型号
					this.info.lock_img = install_info.lock_img // 锁体照片
					this.info.installer = install_info.installer // 安装人员(选择的id)
					this.info.salesperson_id = install_info.salesperson_id // 销售人员(选择的id)
					this.info.lon = install_info.lon
					this.info.lat = install_info.lat

					if (install_info.anzhuang && install_info.anzhuang.name) {
						this.installer_name = install_info.anzhuang.name
					}
					if (install_info.salesperson) {
						this.info.salesperson = install_info.salesperson
					}
					this.map_position = install_info.address

					this.province_str = install_info.province
					this.city_str = install_info.city
				}
			})
		},

		mounted() {
			console.log('current.ver=20250306.0936b');
			let that = this
			if (!getUInfo() || !getUInfo().token) {
				uni.redirectTo({ url: '/pages/login/login' })
			}
			// this.reqArea('', '', 1)

			// let addr1 = '新疆维吾尔自治区乌鲁木齐市天山区天北路111号'
			// console.log('${addr1} = ', getCityAndProvince(addr1));
			// let addr2 = '内蒙古自治区呼和浩特市蒙古区草原路222号'
			// console.log('${addr2} = ', getCityAndProvince(addr2));
			// let addr3 = '山东省临沂自治州兰山区解放路333号'
			// console.log('${addr3} = ', getCityAndProvince(addr3));
			// let addr4 = '香港特别行政区北区港南路444号'
			// console.log('${addr4} = ', getCityAndProvince(addr4));

			try {
				// this.reqQueyMySqlUser()
			} catch (error) {

			}

		},

		onShow() {
			checkUpdate()
		},

		methods: {

			// 切换省的监听
			onProvinceIndex(e) {
				this.index_province = e.detail.value
				this.area_province = this.province_list[this.index_province]
				// 切换省 请求城市列表
				this.reqArea(this.area_province.value, '', 2)
			},

			// 切换城市的监听
			onCityIndex(e) {
				this.index_city = e.detail.value
				this.area_city = this.city_list[this.index_city]
				// 切换城市 请求县区列表
				this.reqArea(this.area_province.value, this.area_city.value, 3)
			},

			// 切换县区的监听
			onAreaIndex(e) {
				this.index_area = e.detail.value
				this.area_area = this.area_list[this.index_area]
			},

			// 接口:获取省市区数据
			async reqArea(province, city, type) {
				let that = this

				let prms = {}
				if (province) {
					prms = { ...prms, province }
				}
				if (city) {
					prms = { ...prms, city }
				}

				let token = getUInfo().token
				// uni.showLoading({ title: '处理中', mask: true, })
				let { code, msg, data } = await that.$getArea(prms)
				// console.log(`getArea...code=${code},msg=${msg},data=`, data)
				if (code == 1) {
					if (type == 1) {
						this.province_list = data
						this.area_province = this.province_list[14] // 默认省份设置为山东
						// 首次请求城市列表
						this.reqArea(this.area_province.value, '', 2)
					}
					if (type == 2) {
						this.city_list = data
						if (this.area_province.value == 1375) { // 当前省份是山东
							this.area_city = this.city_list[12] // 当前城市设置为临沂	
						} else {
							this.area_city = this.city_list[0] // 当前城市设置为第一个城市	
						}
						// 请求县区列表
						this.reqArea(this.area_province.value, this.area_city.value, 3)
					}
					if (type == 3) {
						this.area_list = data
						this.area_area = this.area_list[0]
					}
				} else {
					uni.showToast({ icon: 'none', title: msg })
				}
			},

			// 打开地图选点
			onChooseLocation() {
				// uni.navigateTo({ url: '/pages/ext/sel_map_loc/sel_map_loc' })
				uni.chooseLocation({
					success: (res) => {
						console.log('地图选择位置的结果 = ', JSON.stringify(res));
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						this.map_position = res.name
						this.location = res
						this.info.lon = res.longitude
						this.info.lat = res.latitude

						let analysisArea = getCityAndProvince(res.address)
						if (analysisArea) {
							if (analysisArea.length >= 2) {
								this.province_str = analysisArea[0]
								this.city_str = analysisArea[1]
							} else if (analysisArea.length >= 1) {
								this.province_str = analysisArea[0]
								this.city_str = ''
							} else if (analysisArea.length == 0) {
								this.province_str = '山东省'
								this.city_str = '临沂市'
							}
						} else {
							this.province_str = '山东省'
							this.city_str = '临沂市'
						}

					},
					fail: () => {
						uni.showToast({ title: '未获取到位置信息', icon: 'none' })
					}
				})

			},

			// onUploadImg
			onUploadImg(index) {
				this.chooseWxImage(index)
			},

			// 微信选择图片或拍照
			chooseWxImage(index) {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					// sourceType: [type],
					success(res) {
						console.log('选择的图片路径 = ', res);
						uni.showLoading({ title: '图片上传中...', mask: true })
						uploadImage(res.tempFilePaths[0], 'hhsaz/',
							(res) => {
								uni.hideLoading()
								uni.showToast({ title: '上传成功', icon: 'none' })

								console.log('index = ', index);
								console.log("上传成功结果 = ", res)

								if (index == 0) that.info.lock_img = res
							},
							(res) => {
								uni.hideLoading()
								uni.showToast({ title: '上传失败', icon: 'none' })
							}
						)

					},

					fail(res) {
						uni.showToast({ title: '未获取到图片信息', icon: 'none' })
					}

				})
			},

			// 选择安装人员
			onSelInstaller() {
				uni.navigateTo({ url: '/pages/installer_list/installer_list' })
			},

			// 选择销售人员
			onSelSaler() {
				uni.navigateTo({ url: '/pages/saler_list/saler_list' })
			},

			// 选择安装型号 
			onSelTs() {
				uni.navigateTo({ url: '/pages/ts_list/ts_list' })
			},

			// 选择赠品
			onSelGift() {
				uni.navigateTo({ url: '/pages/gift_list/gift_list' })
			},

			// 选择日期时间(预约时间)
			changeLog(e) {
				console.log('选择日期时间 = ', JSON.stringify(e));
				this.info.install_date = e
			},

			// 输入型号
			onInputModel(e) {
				this.info.ts = e.detail.value
			},

			// 安装地址
			onInputAddr(e) {
				this.info.address = e.detail.value
			},

			// 安装电话
			onInputPhone(e) {
				this.info.mobile = e.detail.value
			},

			// 客户要求
			onInputRemark(e) {
				this.info.remark = e.detail.value
			},

			// 赠品
			onInputGift(e) {
				this.info.gift = e.detail.value
			},

			// 抖音单号
			onInputDySn(e) {
				this.info.dy_sn = e.detail.value
			},

			// 预约时间
			onInputTime(e) {
				this.info.install_time = e.detail.value
			},

			// 锁体型号
			onInputModel2(e) {
				this.info.lock_ts = e.detail.value
			},

			// 点击确认提交
			onOk() {

				if (!this.info.install_date) {
					uni.showToast({ icon: 'none', title: '请选择预约时间' })
					return
				}
				if (!this.info.ts) {
					uni.showToast({ icon: 'none', title: '请选择安装型号' })
					return
				}
				if (!this.info.address) {
					uni.showToast({ icon: 'none', title: '请输入客户地址' })
					return
				}
				if (!this.info.mobile) {
					uni.showToast({ icon: 'none', title: '请输入客户电话' })
					return
				}
				if (!this.info.salesperson_id) {
					uni.showToast({ icon: 'none', title: '请选择销售人员' })
					return
				}
				// if (!this.info.lon) {
				// 	uni.showToast({ icon: 'none', title: '请选择安装位置' })
				// 	return
				// }

				let fixedObj = {
					...this.info,
					install_date: this.info.install_date / 1000 | 0, // 预约时间
					province: this.province_str, // 省
					city: this.city_str, // 市
					// area: this.area_area.value, // 县区
				}

				console.log('准备提交的信息2 = ', JSON.stringify(fixedObj))

				uni.showModal({
					title: '提示',
					content: '确认提交安装信息？',
					success: res => {
						if (res.confirm) {
							this.reqAddInstall(fixedObj)
						}
					}
				})

			},

			// 接口:新增安装需求
			async reqAddInstall(fixedObj) {
				let that = this

				let token = getUInfo().token
				uni.showLoading({ title: '处理中', mask: true, })
				let res = await that.$addInstall(fixedObj)
				console.log(`reqAddInstall...res=`, JSON.stringify(res))
				if (res.code == 1) {
					// 添加成功 重置填写信息
					that.resetInfo()
					uni.showModal({
						title: '提示',
						content: '提交成功！',
						cancelText: '继续添加',
						confirmText: '立即分享',
						success: res => {
							if (res.confirm) {
								// 查看详情(去分享)
								uni.navigateTo({
									url: `/pages/order_detail/order_detail?detail=${JSON.stringify(res.data)}`
								})
							} else {
								// 继续添加
							}
						}
					})
				} else {
					uni.showToast({ icon: 'none', title: res.msg })
				}

			},

			resetInfo() {
				this.info = {
					id: '', // 安装需求id
					install_date: new Date().getTime(),
					ts: '', // 型号
					ts_id: '', // 安装型号(选择的id)
					address: '', // 地址
					mobile: '', // 电话
					remark: '', // 客户要求
					gift: '', // 赠品
					gift_arr: '[]', // 赠品数组数据
					lock_ts: '', // 锁体型号
					lock_img: '', // 锁体照片
					installer: '', // 安装人员(选择的id)
					salesperson_id: '', // 销售人员(选择的id)
					salesperson: '', // 销售人员姓名
					// 默认临沂 118.233695, 35.10305
					lon: '118.233695', // 经度
					lat: '35.10305', // 纬度
					dy_sn: '', // 抖音单号
				}
				delete this.info.id

				this.province_str = '山东省' // 省份
				this.city_str = '临沂市' // 城市

				this.installer_name = '请选择安装人员'
				this.map_position = '请选择地理位置' // 地图选点位置

				// 地理位置对象
				this.location = {}
			},

			// 接口:查询mysql用户
			async reqQueyMySqlUser() {
				let that = this
				let res = await that.$queryMySqlUser()
				console.log(`reqQueyMySqlUser...res=`, res)
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 分割线 */
	.divider {
		width: 100%;
		height: 1rpx;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.info_div {
		display: flex;
		flex-direction: column;
		width: calc(100% - 40rpx);
		margin: 20rpx 20rpx 0 20rpx;
	}

	/* 每个填写项目的容器 */
	.item_div {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		margin: 22rpx 0 0 0;
		font-size: 30rpx;
		/* background-color: red; */
		overflow: hidden;
	}

	/* 大一点的项目容器 */
	.item_div_2 {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		/* line-height: 100rpx; */
		margin: 30rpx 0 0 0;
		font-size: 30rpx;
	}

	/* 预约时间项目的容器 */
	.item_div_3 {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 86rpx;
		line-height: 60rpx;
		margin: 22rpx 0 0 0;
		font-size: 30rpx;
		/* background-color: red; */
		overflow: hidden;
	}

	/* 日期时间选择器 */
	#uni_dt_picker {
		text-align: right;
		max-width: 55%;
		/* font-size: 30rpx; */
		/* border: solid 1rpx #cccccc; */
	}

	.et {
		/* background-color: red; */
		flex-grow: 1;
		margin: 0 0 0 0rpx;
		max-width: 70%;
		height: 60rpx;
		text-align: right;
		font-size: 30rpx;
	}

	.et_2 {
		/* background-color: red; */
		flex-grow: 1;
		margin: 0 0 0 0rpx;
		max-width: 70%;
		height: 100rpx;
		/* line-height: 100rpx; */
		text-align: right;
		font-size: 30rpx;
		/* border: solid 1rpx gray; */
		/* vertical-align: middle; */
	}

	.et_3 {
		display: flex;
		/* background-color: red; */
		flex-grow: 1;
		margin: 0 0 0 0rpx;
		max-width: 70%;
		height: 60rpx;
		font-size: 28rpx;
		/* background-color: red; */
	}

	.area {
		width: 30%;
		flex-grow: 1;
		text-align: center;
		/* background-color: blue; */
		border: solid 1rpx #cccccc;
	}

	/* 赠品项目的容器 */
	.item_div_4 {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 118rpx;
		margin: 22rpx 0 0 0;
		font-size: 30rpx;
		overflow: hidden;
	}

	.et_4 {
		/* background-color: red; */
		flex-grow: 1;
		margin: 0 0 0 0rpx;
		max-width: 82%;
		height: 60rpx;
		text-align: right;
		font-size: 30rpx;
	}

	/* 锁体照片 */
	#img_lock {
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
		margin: 0 20rpx 0 0;
	}

	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(100% - 80rpx);
		margin: 40rpx 0rpx 0 0rpx;
	}

	#btn_ok {
		flex-grow: 1;
		/* width: 300rpx; */
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		background-color: deepskyblue;
		color: white;
		margin: 0rpx 0 0 20rpx;
		border-radius: 10rpx;
	}
</style>